<template>
  <div class="TripsNumber">
    <div class="table_handle_header">

      <div class="table_search">
        <div class="handle_btn">列表设置</div>
        <div class="handle_btn" @click="() => isSearch = !isSearch">数据筛选</div>
      </div>

      <div class="table_status">
        <div v-for="item in table_status" :key="item.color" class="status_item">
          <span class="status_box" :style="{ backgroundColor: item.color }"></span>
          <span>{{ item.name }}</span>
        </div>
      </div>

      <div class="table_handle">
        <div class="handle_split" :class="isMerge ? 'split_active' : ''" @click="() => isMerge = true"></div>
        <div class="handle_merge" :class="!isMerge ? 'merge_active' : ''" @click="() => isMerge = false"></div>
      </div>
    </div>


    <div class="table_data_search" v-if="isSearch">
      <el-from :model="searchForm">
        <el-row>
          <el-col :span="3">
            <el-form-item label="车辆" :label-width="40">
              <el-input v-model="searchForm.name" />
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label="执行状态" :label-width="100">
              <el-input v-model="searchForm.name" />
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label="下发状态" :label-width="100">
              <el-input v-model="searchForm.name" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="时间段" :label-width="80">
              <el-time-picker v-model="searchForm.value1" is-range range-separator="To" start-placeholder="开始时间"
                end-placeholder="结束时间" />
            </el-form-item>
          </el-col>

          <el-col :span="5" :offset="1">
            <el-checkbox v-model="checked1" label="修改计划时间" size="large" />
            <el-checkbox v-model="checked2" label="发车晚点" size="large" />
            <el-checkbox v-model="checked2" label="回场晚点" size="large" />
          </el-col>

          <el-col :span="5" :push="3">
            <el-button type="primary">查询</el-button>
            <el-button>清楚查询</el-button>
          </el-col>

        </el-row>
      </el-from>
    </div>


    <div class="trip_table" v-show="isMerge">

      <div class="table_type">
        <div @click="changeTableType('up')" :class="isUp ? 'active' : ''">上行：站点名称
          <!-- {{props.startAndEndStation[0].upSite.stationName}}  -->
          ->站点名称
        </div>
        <div @click="changeTableType('down')" :class="isUp ? '' : 'active'">下行：站点名称 ->
          <!-- {{props.startAndEndStation[1].upSite.stationName}} -->
        </div>
      </div>

      <div class="table">
        <!-- <BasicTable
          :column="column"
          :tableData="tableData"
          :isSelect="true"
          @select="ChangeSelect"
          @rowClick="rowClick"
          isRowRight    
          :isShowSerial="true"
        >
        </BasicTable> -->

        <!-- <OriginalTable :tableData="tableData" class="table_content"></OriginalTable> -->

      </div>
    </div>

    <div class="trip_table no_merge" v-show="!isMerge">
      <div class="trip_table_up">
        <div class="table_type">
          <div>上行：站点名称 -> 站点名称</div>
        </div>
        <div class="table">
         这个是左边的表格
        </div>
      </div>
      <div class="trip_table_down">
        <div class="table_type">
          <div>下行：站点名称 -> 站点名称</div>
        </div>
        <div class="table">
          这个是右边9边的表格
        </div>
      </div>
    </div>



    <!-- <div class="trip_table no_merge" v-show="!isMerge">
      <div class="trip_table_up">
        <div class="table_type">
          <div>上行：站点名称 -> 站点名称</div>
        </div>
        <div class="table">
          <BasicTable
            :column="column"
            :tableData="tableData"
            :isSelect="true"
            @select="ChangeSelect"
            @rowClick="rowClick"
            isRowRight    
          >
          </BasicTable>
        </div>
      </div>
      <div class="trip_table_down">
        <div class="table_type">
          <div>下行：站点名称 -> 站点名称</div>
        </div>
        <div class="table">
          <BasicTable
            :column="column"
            :tableData="tableData"
            :isSelect="true"
            @select="ChangeSelect"
            @rowClick="rowClick"
            isRowRight         
          >
          </BasicTable>
        </div>
      </div>
    </div> -->
  </div>
</template>

<script setup>
import { watch, ref, defineProps } from 'vue';
import BasicTable from '@/components/BasicTable/BasicTable.vue'
import OriginalTable from '@/components/OriginalTable/OriginalTable'
import { getItineraryList } from '@/api/dispatch/routeLine.js'


// import useVehicleStore from "@/store/modules/vehicle"
const table_status = [
  {
    name: '正常执行',
    color: '#538d35'
  },
  {
    name: '发车晚点',
    color: '#3d7024'
  },
  {
    name: '运行中',
    color: '#4d6fc2'
  },
  {
    name: '到站考核异常',
    color: '#af2e3a'
  },
  {
    name: '未执行',
    color: '#1c2f61'
  },
  {
    name: '已取消',
    color: '#3f4451'
  }
]
const props = defineProps({
  startAndEndStation: Object
})
// const vehicleStore =useVehicleStore()
// const props = defineProps({
//   startAndEndStation:Object,
// })
const isUp = ref(true)
const changeTableType = (data) => {
  switch (data) {
    case 'up':
      isUp.value = true
      break;
    default:
      isUp.value = false
      break;
  }
}
const searchForm = ref({})
const isMerge = ref(true)
const isSearch = ref(false)
const table_height = ref('356px')
watch(isSearch, () => {
  table_height.value = '356px'
  if (isSearch.value) table_height.value = '306px'
})
const ChangeSelect = (val) => {
  console.log(val, '当前选中的数据');
}
const rowClick = (row) => {
  console.log(row, '点击的当前行的数据');
}

// 列配置
const column = ref([
  {
    prop: '',
    label: '班次',
  },
  {
    prop: 'place',
    label: '车辆部位'
  },
  {
    prop: 'vehicleCode',
    label: '车辆'
  },
  {
    prop: 'driverName',
    label: '司机'
  },
  {
    prop: '',
    label: '趟次'
  },
  {
    prop: 'downStatus',
    label: '下发状态'
  },
  {
    prop: 'executeStatus',
    label: '执行状态'
  },
  {
    prop: 'planTime',
    label: '原计划时间'
  },
  {
    prop: 'adjustTime',
    label: '调整时间'
  },
  {
    prop: 'planInterval',
    label: '计划发车间隔'
  },
  {
    prop: 'executeInterval',
    label: '实际发车间隔(调整后)'
  },
  {
    prop: 'executeTimeStart',
    label: '实际发车时间'
  },
  {
    prop: '',
    label: '发车晚点时间'
  },
  {
    prop: 'nonOnTime',
    label: '到站不准点'
  },
  {
    prop: 'executeTimeEnd',
    label: '完成时间'
  },
  {
    prop: '',
    label: '起点站'
  },
  {
    prop: '',
    label: '终点站'
  },
])
// 右键菜单
// const rightMenu = ref([
//   {
//     content: '查看车辆',
//     methods: (e) => {
//       console.log(e, '查看车辆');
//     },
//   },
//   {
//     content: '修改车辆状态',
//     children: [
//       {
//         content: '在线',
//         methods: (e) => {
//           console.log(e, '设置在线状态');
//         },
//       },
//       {
//         content: '修改离线状态',
//         methods: (e) => {
//           console.log(e, '设置离线状态');
//         },
//       }
//     ]
//   }
// ])
// 操作
const handel = ref({
  fixed: 'right',
  width: 120,
  label: '操作',
  option: [
    {
      icon: 'icon-gy_shijianbanli2',
      contents: '修改',
      method: (e) => {
        alert('点击了修改', e)
      },
      disabled: (e) => {
        // console.log(e);
        return false
      }
    },
    {
      icon: 'icon-shanchu',
      contents: '删除',
      method: (e) => {
        alert('点击了删除', e)
      },
    }
  ]
})
// 表格数据
const tableData = ref([
  {
    job: '律师',
    age: '32',
    gender: '男',
    id: '2323232323'
  },
  {
    job: '医生',
    age: '45',
    gender: '男'
  },
  {
    job: '教师',
    age: '52',
    gender: '男'
  },
  {
    job: '学生',
    age: '16',
    gender: '女'
  },
  {
    job: '环卫工人',
    age: '57',
    gender: '男'
  },
  {
    job: '医生',
    age: '45',
    gender: '男'
  },
  {
    job: '教师',
    age: '52',
    gender: '男'
  },
  {
    job: '学生',
    age: '16',
    gender: '女'
  },
  {
    job: '环卫工人',
    age: '57',
    gender: '男'
  },
  {
    job: '医生',
    age: '45',
    gender: '男'
  },
  {
    job: '教师',
    age: '52',
    gender: '男'
  },
  {
    job: '学生',
    age: '16',
    gender: '女'
  },
  {
    job: '环卫工人',
    age: '57',
    gender: '男'
  },
  {
    job: '医生',
    age: '45',
    gender: '男'
  },
  {
    job: '教师',
    age: '52',
    gender: '男'
  },
  {
    job: '学生',
    age: '16',
    gender: '女'
  },
  {
    job: '环卫工人',
    age: '57',
    gender: '男'
  },
])

const route = useRoute()
onMounted(() => {
  getItineraryList(route.query).then(res => {
    console.log('这个是趟次列表返回的数据', res);
    tableData.value = res.data
  })
})

</script>

<style lang="scss" scoped>
@import './assets/black_table.scss';

:deep(.el-checkbox) {
  align-items: normal;
  padding-top: 8px;
}

.no_merge {
  display: flex;
  justify-content: space-between;

  .trip_table_up {
    width: 49%;

    .table_type {
      justify-content: start;

      div {
        margin-left: 0px;
        cursor: default;

        &:hover {
          background-color: #091940;
        }
      }
    }
  }

  .trip_table_down {
    width: 49%;

    .table_type {
      justify-content: start;

      div {
        margin-left: 0px;
        cursor: default;

        &:hover {
          background-color: #091940;
        }
      }
    }
  }
}

.trip_table {
  padding: 0 20px;

  .table_type {
    display: flex;
    justify-content: end;
    align-items: center;

    div {
      margin-left: 5px;
      margin-bottom: 5px;
      font-size: 16px;
      color: #9BAFD6;
      background-color: #091940;
      border: 1px solid #668FF5;
      border-radius: 2px;
      padding: 8px 20px;
      cursor: pointer;

      &:hover {
        background-color: #11224b;
      }
    }

    .active {
      color: #FEFEFE;
      background-color: #668FF5;

      &:hover {
        background-color: #668FF5;
      }
    }
  }

  .table {
    height: v-bind(table_height);
    overflow-y: scroll;
  }
}

.table_data_search {
  padding: 0px 20px;
}

.table_handle_header {
  height: 51px;
  padding: 0px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;

  .table_search {
    flex: 1;
    display: flex;

    .handle_btn {
      margin-right: 10px;
      cursor: pointer;
    }
  }

  .table_status {
    display: flex;

    .status_item {
      margin-right: 20px;

      .status_box {
        display: inline-block;
        height: 12px;
        width: 12px;
        border-radius: 2px;
        margin-right: 10px;
      }
    }
  }

  .table_handle {
    display: flex;

    .handle_merge,
    .handle_split {
      width: 24px;
      height: 24px;
      margin-left: 5px;
      cursor: pointer;
      background-size: contain;
      background-position: center;
    }

    .split_active {
      margin-top: 2px;
      background: url('./assets/img/active_split.svg') no-repeat !important;
    }

    .merge_active {
      background: url('./assets/img/active_merge.svg') no-repeat !important;
    }

    .handle_split {
      margin-top: 2px;
      background: url('./assets/img/split.svg') no-repeat;
    }

    .handle_merge {
      background: url('./assets/img/merge.svg') no-repeat;
    }

  }
}
</style>